<!DOCTYPE html>
<html th:lang="${language}"  xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header(OKR清单)" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: okr-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"    th:each="item : ${okrMapList}" >
    <form class="form-horizontal m row" id="form-info-edit" >
        <div class="edit-object" th:object="${item.okrInfo}">
            <!-- OKR信息容器 -->
            <div class="col-sm-12 border-left">
                <!-- Object内容 -->
                <div class="objectContent"  >
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <i class="fa fa-hourglass-half"></i>
                                <span>Objective:[[*{content}]]</span>
                            </h5>
                            <span class="label label-info pull-right  " style="cursor: pointer;"  th:onclick="'javascript:openSynergyOkrUser(\''+*{id}+'\');'">
                                            <i class="fa fa-share"></i>
                            </span>
                            <span class="label label-primary pull-right">[[#{okr.targetType}]]：[[#{okr.TypePerson}]]</span>
                        </div>
                        <div class="ibox-content">
                            <div class="content-box row" >
                                <div class="col-sm-8">
                                    <table class="table table-no-bordered">
                                        <thead>
                                        <tr>
                                            <th colspan="3">
                                                <i class="fa fa-male"></i>
                                                <span>[[#{okr.dept}]]：[[*{deptName}]]</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td> <p>[[#{okr.targetType}]]：[[#{okr.TypePerson}]]</p></td>
                                            <td> <p>[[#{okr.deadline}]]：[[${item.okrCycle.endTime}]]</p></td>
                                            <td> <p>[[#{okr.updateTime}]]：[[${#dates.format(item.okrInfo.updateTime, 'yyyy-MM-dd HH:mm')}]]</p></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-sm-4">
                                    <table class="table table-no-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <i class="fa fa-male"></i>
                                                <span>[[#{okr.chargePerson}]]</span>
                                            </th>
                                            <th>
                                                <i class="fa fa-flag"></i>
                                                <span>[[#{okr.average}]]</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>[[*{userName}]]</td>
                                            <td>[[*{scoreStar}]]</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row progress-box">
                                <div class="pull-left">
                                    <span>[[#{okr.objectProgress}]]：</span>
                                    <span>[[*{process}]]%</span>
                                </div>
                                <div class="col-sm-8">
                                    <div class="progress progress-mini">
                                        <div th:style="'width:'+(*{process})+'%'" class="progress-bar"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- KeyResult内容 -->
                <div class="ibox kResultContent">
                    <div class="ibox-content">
                        <h4>
                            <i class="fa fa-plus-circle"></i>
                            <span>Key Results：</span>
                        </h4>
                        <ul class="sortable-list contentList agile-list ui-sortable">
                            <li class="success-element kr-list row" th:each="entries,stat:${item.okrKReultInfo}">
                                <input class="" th:name="'krInfos[' + ${stat.index} + '].id'" type="hidden" th:value="${entries.id}">
                                <div class="kr-key-num">[[${entries.rowCode}]]</div>
                                <div class="col-sm-1 col-xs-12 kr-key-p0">
                                    <div class="kr-progress-box">
                                        <canvas class="kr-progress-canvas" th:percent="${entries.process}" th:id="kr-progress-canvas-+${stat.count}*${entries.id}" ></canvas>
                                        <div class="kr-progress-desc">[[#{okr.krProess}]]</div>
                                    </div>
                                </div>
                                <div class="col-sm-11 kr-key-pl0">
                                    <div class="form-group">
                                        <span class="col-sm-2 control-label">[[#{okr.krDetail}]]：</span>
                                        <h4 class="kr-content col-sm-8">[[${entries.content}]]</h4>
                                        <span class="col-sm-2 control-label"    th:onclick="'javascript:openSynergyOkrUser(\''+${entries.id}+'\');'">
                                            <i class="fa fa-share"></i>
                                            <i class="fa fa-gg"></i>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <span class="col-sm-2 control-label">[[#{okr.rowStar}]]：</span>
                                        <h4 class="kr-score col-sm-8">
                                            <input class="score-star" th:name="'krInfos[' + ${stat.index} + '].scoreStar'" type="hidden" min=0 max=1 step=0.1  data-size="xs" th:value="${entries.scoreStar}">
                                        </h4>
                                    </div>
                                    <div class="form-group">
                                        <span class="col-sm-2 control-label">[[#{okr.rowConfidence}]]：</span>
                                        <h4 class="kr-confidence col-sm-8">
                                            <input class="confidence-star" th:name="'krInfos[' + ${stat.index}  + '].confidenceStar'" type="hidden" min=1 max=10 step=1 data-size="xs" th:value="${entries.confidenceStar}">
                                        </h4>
                                    </div>
                                    <div class="form-group">
                                        <span class="col-sm-2 control-label">[[#{okr.rowProess}]]：</span>
                                        <h4 class="col-sm-6 kr-score">
                                            <div class="progress progress-mini progress-striped">
                                                <div th:style="'width:'+${entries.process}+'%'" class="progress-bar"></div>
                                                <input class="progress-star" th:name="'krInfos[' + ${stat.index} + '].process'" th:value="${entries.process}" type="hidden" >
                                            </div>
                                        </h4>
                                        <div class="col-sm-1 caption ">
                                            <span class="label label-default">[[${entries.process}]]%</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <span class="col-sm-2 control-label">[[#{okr.rowPriority}]]：</span>
                                        <div class="col-sm-6">
                                            <select class="form-control m-b" th:name="'krInfos[' + ${stat.index} + '].priority'" readonly th:with="type=${@dict.getType('okr_level')}">
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${dict.dictValue} == ${entries.priority}"></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" th:if="not ${#lists.isEmpty(item.okrInfo.projectList)}">
                                        <label class="col-sm-2 control-label">[[#{okr.projects}]]：</label>
                                        <div class="col-sm-6" >
                                            <label class="checkbox-inline check-box"  th:each="project : ${item.okrInfo.projectList}">
                                                <input type="checkbox" th:name="'krInfos[' + ${stat.index} + '].projects'" th:value="${project.projectCode}" th:checked="${project.selected}" />
                                                <span th:text="${project.projectCode}"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" th:if="${entries.gradeRemark}">
                                        <span class="col-sm-2 control-label" >[[#{okr.gradeRemark}]]：</span>
                                        <div class="col-sm-6">
                                            <div class="remark-content-box accordion-inner" th:utext="${entries.gradeRemark}"></div>
                                        </div>
                                    </div>
                                    <div class="form-group" th:if="${entries.remarkContent}">
                                        <span class="col-sm-2 control-label">[[#{okr.progressNotes}]]：</span>
                                        <div class="col-sm-6">
                                            <div class="accordion-group">
                                                <div class="accordion-heading" style="padding-top: 7px; margin-bottom: 0;">
                                                    <a class="accordion-toggle" data-toggle="collapse" th:href="'#remark-'+${entries.id}">
                                                        [[${#strings.abbreviate(entries.remarkTextContent,26)}]]
                                                    </a>
                                                </div>
                                                <div th:id="'remark-'+${entries.id}" class="accordion-body collapse" style="height: 0px; ">
                                                    <div class="remark-content-box accordion-inner" th:utext="${entries.remarkContent}"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: star-rating-js" />
<th:block th:include="include :: ztree-js" />
<th:block th:include="include :: qqFace" />
<th:block th:include="include :: okr-js" />
<th:block th:include="include :: comment-js" />
<script type="text/javascript">

    var prefix = ctx + "okr/info";
    //加载结构组织树木
    $(function() {
        var url = prefix + "/okrSynergyTreeData?id="+ $("#id").val();
        var options = {
            id: "synergyTrees",
            url: url,
            check: { enable: true },
            showCheckBox: true,
            expandLevel: 1,
        };
        $.tree.init(options);
    });

    $(function() {
        //显示进度KR条
        let width = height = $(".kr-progress-box").width();

        //初始化 容器高度
        $(".kr-progress-canvas").attr({width:width,height:height});

        //初始化 圆形进度条
        $(".kr-progress-canvas").each( function(index,value){ progressCircle('circle',value); });

        //初始化 直线进度条
        $(".kr-bootstrap-box").each( function(index,value){ progressBootstrap('bootstrap',value); });

        //初始化 目标评分
        $('.score-star').rating({
            hoverOnClear: false,
            min:0,
            max:1,
            step:0.1,
            starCaptions: {
                0: '0',
                0.1: '0.1',
                0.2: '0.2',
                0.3: '0.3',
                0.4: '0.4',
                0.5: '0.5',
                0.6: '0.6',
                0.7: '0.7',
                0.8: '0.8',
                0.9: '0.9',
                1: '1'
            },
            starCaptionClasses:{
                0:   'label',
                0.1: 'label',
                0.2: 'label',
                0.3: 'label',
                0.4: 'label',
                0.5: 'label',
                0.6: 'label',
                0.7: 'label badge-success-true',
                0.8: 'label badge-success-true',
                0.9: 'label badge-success-true',
                1  : 'label badge-success-true'
            },
            clearValue:0,
            zeroAsNull:false,
            clearCaption: "0",
        });

        //初始话 信心指数
        $('.confidence-star').rating({
            hoverOnClear: false,
            min:0,
            max:10,
            step:1,
            starCaptions: {
                0: '0',
                1: '1',
                2: '2',
                3: '3',
                4: '4',
                5: '5',
                6: '6',
                7: '7',
                8: '8',
                9: '9',
                10: '10'
            },
            starCaptionClasses:{
                0: 'label',
                1: 'label',
                2: 'label',
                3: 'label',
                4: 'label',
                5: 'label',
                6: 'label',
                7: 'label badge-success-true',
                8: 'label badge-success-true',
                9: 'label badge-success-true',
                10:'label badge-success-true'
            },
            clearValue:0,
            zeroAsNull:false,
            clearCaption: "0",
            filledStar: '<i class="glyphicon glyphicon-heart"></i>',
            emptyStar: '<i class="glyphicon glyphicon-heart-empty"></i>'
        });

        //初始化 tip
        $('.tip').tooltip({
            animation:true,
            title:"[[#{okr.tip}]]",
            trigger:'hover',
            placement:"bottom",
        });

    });

    /***
     * 查询OKR协同列表
     * **/
    function openSynergyOkrUser(okrId)
    {
        var url = prefix + '/synergyUserView/' + okrId;
        $.modal.open("协同清单", url);
    }

    /*
     * 园形进度条初始化
     * @param value 是jquery DOM ;
     * return 当前对象
     */
    function progressCircle(type,value){
        return new Progress({
            type: type,
            el: value.getAttribute("id"), //canvas元素id
            deg: parseFloat(value.getAttribute("percent")),
            timer: 2,
            lineWidth: 5,
            lineBgColor: '#fffff',
            lineColor: '#409eff',
            textColor: '#000000',
            fontSize: 16,
            circleRadius: 30,
            width:100,
            height:100,
        });
    }

    /*
     * 直线进度条初始化
     * @param value 是jquery DOM ;
     * return 当前对象
     */
    function progressBootstrap(type,value){
        return new Progress({
            type: type,
            el:value.querySelector(".progress"),
            textId:value.querySelector(".caption span"),
            clearId:value.querySelector(".clear-rating"),
            bgColor:"progress-striped",
        });
    }

    // 点击确定执行函数
    function submitHandler() {
        if ($.validate.form()) {
            $("#synergyUsers").val($.tree.getCheckedNodes("userId"));
            $.operate.save(prefix + "/edit", $('#form-info-edit').serialize());
        }
    }
</script>
</body>
</html>